<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块游戏</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            margin: 0;
            padding: 20px;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .game-container {
            background: white;
            border-radius: 15px;
            padding: 5px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            max-width: 100%;
            width: 100%;
            text-align: center;
        }
        
        h1 {
            color: #333;
            margin-bottom: 20px;
            font-size: 2.5em;
        }
        
        .game-area {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 20px;
        }
        
        #gameCanvas {
            border: 3px solid #333;
            border-radius: 8px;
            background: #f0f0f0;
            max-width: 100%;
            height: auto;
            cursor: pointer;
        }
        
        .game-info {
            flex: 1;
            text-align: left;
        }
        
        .score-board {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .score-board h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .score-board p {
            margin: 5px 0;
            font-size: 18px;
            font-weight: bold;
        }
        
        .controls {
            background: #f8f9fa;
            border: 2px solid #e9ecef;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 20px;
        }
        
        .controls h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .controls p {
            margin: 5px 0;
            font-size: 14px;
        }
        
        .game-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        button {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background: #28a745;
            color: white;
        }
        
        .btn-primary:hover {
            background: #218838;
            transform: translateY(-2px);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-secondary:hover {
            background: #545b62;
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .game-container {
                padding: 5px;
            }
            
            .game-area {
                flex-direction: column;
                align-items: center;
            }
            
            .game-info {
                width: 100%;
            }
            
            .score-board, .controls {
                padding: 8px;
                margin-bottom: 10px;
            }
            
            .controls p {
                font-size: 12px;
            }
            
            h1 {
                font-size: 1.8em;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="game-container">
        <h1>🎹 别踩白块</h1>
        
        <div class="game-area">
            <canvas id="gameCanvas" width="300" height="400"></canvas>
            
            <div class="game-info">
                <div class="game-buttons">
                    <button class="btn-primary" onclick="startGame()">开始游戏</button>
                    <button class="btn-secondary" onclick="pauseGame()">暂停游戏</button>
                    <button class="btn-secondary" onclick="resetGame()">重新开始</button>
                </div>
                
                <div class="score-board">
                    <h3>📊 游戏统计</h3>
                    <p>分数: <span id="score">0</span></p>
                    <p>连击: <span id="combo">0</span></p>
                    <p>最高分: <span id="highScore">0</span></p>
                    <p>速度: <span id="speed">1</span></p>
                </div>
                
                <div class="controls">
                    <h3>🎯 操作说明</h3>
                    <p>点击黑色方块得分</p>
                    <p>避免点击白色方块</p>
                    <p>速度会逐渐增加</p>
                    <p>空格键暂停/继续</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        
        // 游戏常量
        const TILE_WIDTH = 75;
        const TILE_HEIGHT = 100;
        const COLUMNS = 4;
        const ROWS = 4;
        
        // 游戏状态
        let tiles = [];
        let gameRunning = false;
        let gamePaused = false;
        let score = 0;
        let combo = 0;
        let highScore = localStorage.getItem('pianoHighScore') || 0;
        let speed = 1;
        let gameLoop;
        let lastTime = 0;
        let tileSpeed = 2;
        
        // 初始化游戏
        function initGame() {
            tiles = [];
            gameRunning = false;
            gamePaused = false;
            score = 0;
            combo = 0;
            speed = 1;
            tileSpeed = 2;
            
            // 初始化第一行
            generateNewRow();
            
            updateScore();
            updateCombo();
            updateHighScore();
            updateSpeed();
            drawGame();
        }
        
        // 生成新的一行
        function generateNewRow() {
            const blackTileIndex = Math.floor(Math.random() * COLUMNS);
            const newRow = [];
            
            for (let i = 0; i < COLUMNS; i++) {
                newRow.push({
                    x: i * TILE_WIDTH,
                    y: -TILE_HEIGHT,
                    isBlack: i === blackTileIndex,
                    clicked: false,
                    missed: false
                });
            }
            
            tiles.push(newRow);
        }
        
        // 绘制游戏
        function drawGame() {
            // 清空画布
            ctx.fillStyle = '#f0f0f0';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // 绘制所有方块
            tiles.forEach(row => {
                row.forEach(tile => {
                    if (tile.y + TILE_HEIGHT > 0 && tile.y < canvas.height) {
                        if (tile.isBlack) {
                            if (tile.clicked) {
                                ctx.fillStyle = '#28a745'; // 点击过的黑色方块变绿
                            } else if (tile.missed) {
                                ctx.fillStyle = '#dc3545'; // 错过的黑色方块变红
                            } else {
                                ctx.fillStyle = '#333'; // 黑色方块
                            }
                        } else {
                            ctx.fillStyle = '#fff'; // 白色方块
                        }
                        
                        ctx.fillRect(tile.x, tile.y, TILE_WIDTH - 2, TILE_HEIGHT - 2);
                        
                        // 绘制边框
                        ctx.strokeStyle = '#ddd';
                        ctx.lineWidth = 1;
                        ctx.strokeRect(tile.x, tile.y, TILE_WIDTH - 2, TILE_HEIGHT - 2);
                    }
                });
            });
        }
        
        // 更新游戏状态
        function updateGame(currentTime) {
            if (!gameRunning || gamePaused) return;
            
            const deltaTime = currentTime - lastTime;
            lastTime = currentTime;
            
            // 移动方块
            tiles.forEach(row => {
                row.forEach(tile => {
                    tile.y += tileSpeed;
                });
            });
            
            // 移除超出屏幕的方块
            tiles = tiles.filter(row => {
                return row.some(tile => tile.y < canvas.height);
            });
            
            // 检查是否有黑色方块超出屏幕底部
            tiles.forEach(row => {
                row.forEach(tile => {
                    if (tile.isBlack && !tile.clicked && !tile.missed && tile.y >= canvas.height) {
                        tile.missed = true;
                        gameOver();
                    }
                });
            });
            
            // 生成新行
            if (tiles.length === 0 || tiles[tiles.length - 1][0].y > 0) {
                generateNewRow();
            }
            
            drawGame();
        }
        
        // 游戏结束
        function gameOver() {
            gameRunning = false;
            
            if (score > highScore) {
                highScore = score;
                localStorage.setItem('pianoHighScore', highScore);
                updateHighScore();
            }
            
            showMessage(`游戏结束！得分：${score}`);
        }
        
        // 开始游戏
        function startGame() {
            if (gameRunning) return;
            
            gameRunning = true;
            gamePaused = false;
            lastTime = performance.now();
            
            function gameLoop(currentTime) {
                updateGame(currentTime);
                if (gameRunning) {
                    requestAnimationFrame(gameLoop);
                }
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        // 暂停游戏
        function pauseGame() {
            if (!gameRunning) return;
            
            gamePaused = !gamePaused;
            if (gamePaused) {
                showMessage('游戏已暂停');
            } else {
                lastTime = performance.now();
            }
        }
        
        // 重置游戏
        function resetGame() {
            gameRunning = false;
            initGame();
        }
        
        // 更新分数显示
        function updateScore() {
            document.getElementById('score').textContent = score;
        }
        
        // 更新连击显示
        function updateCombo() {
            document.getElementById('combo').textContent = combo;
        }
        
        // 更新最高分显示
        function updateHighScore() {
            document.getElementById('highScore').textContent = highScore;
        }
        
        // 更新速度显示
        function updateSpeed() {
            document.getElementById('speed').textContent = speed.toFixed(1);
        }
        
        // 显示消息
        function showMessage(text) {
            const messageDiv = document.createElement('div');
            messageDiv.textContent = text;
            messageDiv.style.position = 'fixed';
            messageDiv.style.top = '50%';
            messageDiv.style.left = '50%';
            messageDiv.style.transform = 'translate(-50%, -50%)';
            messageDiv.style.background = 'rgba(0, 0, 0, 0.8)';
            messageDiv.style.color = 'white';
            messageDiv.style.padding = '20px';
            messageDiv.style.borderRadius = '10px';
            messageDiv.style.fontSize = '18px';
            messageDiv.style.zIndex = '1000';
            
            document.body.appendChild(messageDiv);
            
            setTimeout(() => {
                document.body.removeChild(messageDiv);
            }, 2000);
        }
        
        // 处理点击事件
        function handleClick(event) {
            if (!gameRunning || gamePaused) return;
            
            const rect = canvas.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            
            // 查找被点击的方块
            let clickedTile = null;
            tiles.forEach(row => {
                row.forEach(tile => {
                    if (x >= tile.x && x < tile.x + TILE_WIDTH &&
                        y >= tile.y && y < tile.y + TILE_HEIGHT &&
                        !tile.clicked) {
                        clickedTile = tile;
                    }
                });
            });
            
            if (clickedTile) {
                clickedTile.clicked = true;
                
                if (clickedTile.isBlack) {
                    // 点击黑色方块得分
                    score += 10;
                    combo++;
                    
                    // 每50分增加速度
                    if (score % 50 === 0) {
                        speed += 0.2;
                        tileSpeed += 0.3;
                        updateSpeed();
                    }
                    
                    updateScore();
                    updateCombo();
                } else {
                    // 点击白色方块游戏结束
                    gameOver();
                }
                
                drawGame();
            }
        }
        
        // 鼠标点击事件
        canvas.addEventListener('click', handleClick);
        
        // 触摸事件
        canvas.addEventListener('touchstart', (event) => {
            event.preventDefault();
            const touch = event.touches[0];
            const clickEvent = {
                clientX: touch.clientX,
                clientY: touch.clientY
            };
            handleClick(clickEvent);
        });
        
        // 键盘控制
        document.addEventListener('keydown', (e) => {
            if (e.key === ' ') {
                pauseGame();
            }
        });
        
        // 初始化游戏
        window.addEventListener('load', initGame);
    </script>
</body>
</html>